<template>
  <div>
    <div class="repo-title bold-span">管理知识库</div>
    <el-icon class="repo-icon bold-span" @click="openDialog"><Plus /></el-icon>
  </div>
  <div class="repo-list">
    <el-card class="card-container" v-for="(repo, index) in repos" :key="repo.id" style="margin-bottom: 15px;">
      <template #header>
        <div class="card-header">
          <el-icon color="#409EFC"><Notebook /></el-icon> <span>{{ repo.title }}</span>
          <el-popover placement="bottom-end" :width="160" trigger="click" v-model:visible="popoverVisibilities[index]">
            <template #reference>
              <el-button style="float: right; padding: 3px 0;" type="text">
                <el-icon><More /></el-icon>
              </el-button>
            </template>
            <el-menu>
              <el-menu-item index="4" @click="openEditDialog(repo)">
                <el-icon><Edit /></el-icon>
                <span>重命名</span>
              </el-menu-item>
              <el-menu-item @click="removeRepo(repo.id!)">
                <el-icon><Delete /></el-icon>
                <span>删除</span> 
              </el-menu-item>
            </el-menu>
          </el-popover>
        </div>
      </template>
      <div class="repo-desc" @click="enterNote(repo)">{{ repo.description }}</div>
    </el-card>
  </div>
  <div v-if="loading" class="loading-more repo-title">正在加载...</div>
  <div v-if="!loading && !hasMore" class="no-more repo-title">没有更多了</div>

  <!-- 创建知识库的对话框 -->
  <el-dialog title="创建新的知识库" v-model="dialogVisible" width="30%">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑知识库的对话框 -->
  <el-dialog title="编辑知识库" v-model="editDialogVisible" width="30%">
    <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="editForm.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input type="textarea" v-model="editForm.description"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeEditDialog">取 消</el-button>
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script lang="ts">
import useRepoDialog from '@/views/home/components/useRepoDialog';
import useRepos from '@/views/home/components/useRepos';
import { ElButton, ElCard, ElDialog, ElForm, ElFormItem, ElIcon, ElMenu, ElMenuItem, ElPopover, FormInstance } from 'element-plus';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MyKnowledgeBaseView',
  components: {
    ElCard,
    ElIcon,
    ElButton,
    ElPopover,
    ElMenu,
    ElMenuItem,
    ElDialog,
    ElForm,
    ElFormItem
  },
  setup() {
    const formRef = ref<FormInstance>();
    const editFormRef = ref<FormInstance>();

    const {
      repos,
      enterNote,
      popoverVisibilities,
      removeRepo,
      modfiyRepo,
      loading,
      hasMore,
      addRepo
    } = useRepos();

    const {
      dialogVisible,
      form,
      openDialog,
      closeDialog,
      formLabelWidth,
      resetForm
    } = useRepoDialog();

    // 表单验证规则
    const rules = {
      title: [
        { required: true, message: '请输入知识库标题', trigger: 'blur' },
        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入知识库描述', trigger: 'blur' },
        { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
      ]
    };

    function submitForm() {
      if (!formRef.value) return;
      formRef.value.validate((valid) => {
        if (valid) {
          addRepo({ ...form.value });
          closeDialog();
          resetForm();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }

    // 编辑对话框相关的状态和方法
    const editDialogVisible = ref(false);
    const editForm = ref<KnowledgeRepo>({ id: undefined!, title: '', description: '' });

    function openEditDialog(repo: KnowledgeRepo) {
      editForm.value = { ...repo };
      editDialogVisible.value = true;
    }

    function closeEditDialog() {
      editDialogVisible.value = false;
    }

    function submitEditForm() {
      debugger;
      if (!editFormRef.value) return;
      debugger;
      editFormRef.value.validate((valid) => {
        if (valid) {
          modfiyRepo(editForm.value);
          closeEditDialog();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }


    return {
      repos,
      enterNote,
      popoverVisibilities,
      removeRepo,
      loading,
      hasMore,
      dialogVisible,
      form,
      openDialog,
      closeDialog,
      formLabelWidth,
      rules,
      formRef,
      submitForm,
      editDialogVisible,
      editFormRef,
      editForm,
      openEditDialog,
      closeEditDialog,
      submitEditForm
    };
  }
});
</script>

<style scoped>
.repo-title {
  padding-left: 20px;
}

.bold-span {
  font-weight: bold;
  font-family: "黑体";
}

.repo-icon {
  margin-top: 10px;
  margin-left: 20px;
  cursor: pointer;
}

.card-container {
  border-radius: 10px;
}

.repo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.repo-desc {
  padding: 40px 10px;
  color: #737479d2;
  font-size: 12px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .repo-list {
    grid-template-columns: 1fr;
  }
}
</style>